<template>
  <CommonLayout current-path="/english">
    <!-- 功能卡片区域 -->
    <div class="container">
      <router-link 
        v-for="card in functionCards" 
        :key="card.path"
        :to="card.path" 
        class="text-decoration-none"
      >
        <div class="card" :class="card.bgColor">
          <div class="card-body">
            <h5 class="card-title">{{ card.title }}</h5>
            <p class="card-text">{{ card.description }}</p>
          </div>
        </div>
      </router-link>
    </div>
  </CommonLayout>
</template>

<script>
import CommonLayout from '@/components/layout/CommonLayout.vue'

export default {
  name: 'EnglishView',
  components: {
    CommonLayout
  },
  data() {
    return {
      functionCards: [
        {
          title: '历年英语真题',
          description: '覆盖98-24年，刷题、精读两不误',
          path: '/english/exam?year=2024',
          bgColor: 'bg-info text-white'
        },
        {
          title: '生词本',
          description: '做题过程中遇到的生词，包含单词的词根 例句等',
          path: '/english/vocabulary',
          bgColor: 'bg-success text-white'
        },
        {
          title: '智能出题',
          description: '根据生词本，智能生成阅读理解、翻译、写作等题目',
          path: '/english/ai-exercise',
          bgColor: 'bg-danger text-white'
        },
        {
          title: '长难句训练',
          description: '长难句分析，逐句精讲',
          path: '/english/sentence-practice',
          bgColor: 'bg-warning text-white'
        }
      ]
    }
  }
}
</script>

<style scoped>
.card {
  border-radius: 12px;
  margin-bottom: 15px;
}

:root {
  --theme-color: #00b8a9;
}
</style> 